<template>
  <keep-alive :include="cachedViews">
    <!-- <div :is="currentView"></div> -->
    <div>
      <div class="app-container clearfix pageHeader">
        <div class="header fl">{{$route.meta.title}}</div>
      </div>
      <div class="app-container margin-content padding-content">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="申报类型">
            <el-select v-model="form.type" placeholder="请选择申报类型">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报时间">
            <el-date-picker v-model="form.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-container margin-content padding-content">
        <!-- <ve-histogram :data="chartData"  :extend="chartExtend"  :legend-visible="false" :loading="loading" ></ve-histogram> -->
        <ve-histogram :data="chartData" :extend="chartExtend" :legend-visible="false" :tooltip-visible="false" :events="chartEvents" :loading="loading"></ve-histogram>
  
      </div>
  
  
    </div>
  </keep-alive>
</template>

<script>
  import {
    getGoodBusinessData,
  } from '@/api/declaration'
  import VeHistogram from 'v-charts/lib/histogram.common'
  import 'v-charts/lib/style.css'
  export default {
    name: 'declaration',
    components: {
      've-histogram': VeHistogram,
    },
    data() {
      let selt = this
      this.chartExtend = {
        series: {
          barWidth: 50,
          // stack: { 'value': ['总量', '失败', '不通过', '查验'] },
          itemStyle: {
            normal: {
              color: (params) => {
                // build a color map as your need.
                var colorList = [
                  '#c2b5e0', '#6fb0ea', '#ea7788', '#f5bb89', '#2967a0',
                ]
                return colorList[params.dataIndex]
              },
            }
          },
          tooltip: {
            // normal: {
              formatter: '{b0}: {c0}{b1}: {c1}'
            // }
          },
          label: {
            normal: {
              show: true,
              position: "top",
              // formatter: '{a}: {c}'
              formatter: (params) => {
                // console.log(params)
                let str = ''
                if (params.seriesName === '失败' || params.seriesName === '不通过' || params.seriesName === '查验' ) {
                  return ''
                }
                // console.log(this)
                // console.log(self)
                switch (params.name) {
                  case '申报':
                  str = params.data
                  break
                  case '入库':
                  str = `${params.data}\n失败：${this.chartData.rows[1]['失败']}`
                  // str = params.data + '\n失败 ' +this.chartData.rows[1]['失败']
                  break
                  case '审核':
                  str = `${params.data}\n不通过：${this.chartData.rows[2]['不通过']}`
                  break
                  case '放行':
                  str = `${params.data}\n查验：${this.chartData.rows[3]['查验']}`
                  break
                  case '结关':
                  str = params.data
                  break
                  // case '失败':
                  // break;
                  // case '不通过':
                  // break;
                  // case '查验':
                  // break;
                }
                return str
              }
            }
          }
        }
      }
      
      this.chartEvents = {
        mouseover: function(e) {
          self.name = e.name
          // console.log(e)
        }
      }
      return {
        options: [{
          name: '海关',
          value: 'CUS'
        }, {
          name: '国检',
          value: 'CIQ'
        }],
        form: {
          daterange: '',
          type: ''
        },
        scrollHeight: null,
        tooltip: false,
        chartData: {
          // columns: ['申报', '入库', '审核', '放行', '结关'],
          // columns: ['步骤', '总量', '失败', '不通过', '查验'],
          columns: ['步骤', '总量'],
          rows: [{
              '步骤': '申报',
              '总量': 0
            },
            {
              '步骤': '入库',
              '总量': 0,
            },
            {
              '步骤': '审核',
              '总量': 0,
            },
            {
              '步骤': '放行',
              '总量': 0,
            },
            {
              '步骤': '结关',
            },
          ]
        },
        loading: false
      }
    },
    computed: {
      // currentView(){
      //   return this.view[this.index]
      // },
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      }
    },
    methods: {
  
      getData() {
        let params = {
          declareBeginDate: this.form.daterange ? this.form.daterange[0] : '',
          declareEndDate: this.form.daterange ? this.form.daterange[1] : '',
          declareType: this.form.type
        }
        this.loading = true
        getGoodBusinessData(params).then((res) => {
          console.log(res.data)
          this.loading = false
          if (res.data.code === 200) {
            let _data = res.data.data;
            this.chartData.rows = [{
                '步骤': '申报',
                '总量': _data.declare
              },
              {
                '步骤': '入库',
                '总量': _data.warehousing,
                '失败': _data.failNum
              },
              {
                '步骤': '审核',
                '总量': _data.examine,
                '不通过': _data.noPass
              },
              {
                '步骤': '放行',
                '总量': _data.release,
                '查验': _data.inspection
              },
              {
                '步骤': '结关',
                '总量': _data.clearance
              },
            ]
          }
  
        })
      },
      doSearch() {
        this.getData()
      },
      resetForm() {
        this.form = {
          daterange: '',
          type: '',
        }
      }
    },
    created() {
      this.getData()
    },
  }
</script>
